<script setup lang="ts">
import { computed, defineEmits, defineProps, ref } from 'vue';

import { Image, ImagePreviewGroup } from 'ant-design-vue';
import PropTypes from 'ant-design-vue/es/_util/vue-types';

import { getFileUrl } from '#/utils/fileUtils';

const props = defineProps({
  listFlag: {
    type: Boolean,
    default: false,
  },
  isThumbnail: {
    type: Boolean,
    default: false,
  },
  src: {
    type: [String, Array],
    default: '',
  },
  alt: {
    type: String,
    default: '',
  },
  width: {
    type: [Number, String],
    default: undefined,
  },
  height: {
    type: [Number, String],
    default: undefined,
  },
  previewMask: {
    type: [Boolean, Function],
    default: undefined,
  },
  placeholder: PropTypes.any,
  fallback: {
    type: String,
    default: undefined,
  },
});
const emit = defineEmits(['click', 'error']);
const visible = ref(false);
const urlList = computed(() => {
  if (!props.src) {
    return [];
  }
  // 判断是否数组
  if (Array.isArray(props.src)) {
    return props.src.map((item) => getFileUrl(item, props.isThumbnail));
  }
  // 判断是否逗号分割
  if (props.src.includes(',')) {
    return props.src
      .split(',')
      .map((item) => getFileUrl(item, props.isThumbnail));
  }
  return [getFileUrl(props.src, props.isThumbnail)];
});
const url = computed(() => {
  if (!props.src) {
    return '';
  }
  // 判断是否数组
  if (Array.isArray(props.src)) {
    return getFileUrl(props.src[0], props.isThumbnail);
  }
  // 判断是否逗号分割
  if (props.src.includes(',')) {
    return getFileUrl(props.src.split(',')[0], props.isThumbnail);
  }
  return getFileUrl(props.src, props.isThumbnail);
});
const previewList = computed(() => {
  if (!props.src) {
    return [];
  }
  // 判断是否数组
  if (Array.isArray(props.src)) {
    return props.src.map((item) => getFileUrl(item, props.isThumbnail));
  }
  // 判断是否逗号分割
  if (props.src.includes(',')) {
    return props.src
      .split(',')
      .map((item) => getFileUrl(item, props.isThumbnail));
  }
  return [getFileUrl(props.src, props.isThumbnail)];
});
const handleClick = (e: Event) => {
  visible.value = true;
  emit('click', e);
};
const handleError = (e: Event) => {
  emit('error', e);
};
</script>
<template>
  <div class="p-2" v-if="url">
    <div v-if="listFlag" class="image-list">
      <ImagePreviewGroup>
        <Image
          v-for="(item, index) in urlList"
          :key="index"
          :width="width"
          :height="height"
          :src="item"
          :preview="{ src: previewList[index] }"
          @click="handleClick"
          crossorigin="anonymous"
          class="image-item"
        />
      </ImagePreviewGroup>
    </div>
    <div v-else>
      <Image
        :src="url"
        crossorigin="anonymous"
        :preview="false"
        :alt="alt"
        :width="width"
        :height="height"
        :placeholder="placeholder"
        :fallback="fallback"
        @click="handleClick"
        @error="handleError"
      />
      <div style="display: none">
        <ImagePreviewGroup
          crossorigin="anonymous"
          :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }"
        >
          <Image
            v-for="(item, index) in previewList"
            :key="index"
            :width="width"
            :height="height"
            :preview="{ src: item }"
            crossorigin="anonymous"
          />
        </ImagePreviewGroup>
      </div>
    </div>
  </div>
</template>

<style scoped>
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-item {
  margin-right: 16px;
  margin-bottom: 16px;
}

.image-item:last-child {
  margin-right: 0;
}
</style>
